<template>
  <div class="footerNav" :class="isIPhoneX ? 'on' : ''">
    <router-link
      :to="{ name: 'HOME' }"
      :class="$route.name === 'HOME' ? 'on' : ''"
      :title="this.$t('lang.推荐')"
      ><i
        :class="$route.name === 'HOME' ? 'icon-home-filling' : 'icon-home'"
      ></i
    ></router-link>
    <router-link
      :to="{ name: 'SEARCH' }"
      :class="$route.name === 'SEARCH' ? 'on' : ''"
      :title="this.$t('lang.搜索')"
      ><i class="icon-search"></i
    ></router-link>
    <router-link
      :to="{ name: 'UPDATEIMG', params: { usid: $store.state.user.userId } }"
      class="footerNav_upload"
      :title="this.$t('lang.发布')"
      ><i class="icon-add-circle"></i
    ></router-link>
    <router-link
      :to="{ name: 'MESSAGE' }"
      :class="$route.name === 'MESSAGE' ? 'on' : ''"
      :title="this.$t('lang.消息')"
      ><i
        :class="
          $route.name === 'MESSAGE' ? 'icon-favorites-fill' : 'icon-favorites'
        "
      ></i
      ><span
        class="footernav_tip animate__animated"
        :class="isNewMessage ? 'animate__bounceIn' : ''"
        >{{ count }}</span
      ></router-link
    >
    <router-link
      :to="{ name: 'MY' }"
      :class="$route.name === 'MY' ? 'on' : ''"
      :title="this.$t('lang.我的')"
      ><i :class="$route.name === 'MY' ? 'icon-user-filling' : 'icon-user'"></i
    ></router-link>
  </div>
</template>
<script>
export default {
  name: "FooterNav",
  data() {
    return {
      count: 99,
      isNewMessage: true,
      isIPhoneX: false,
    };
  },
  methods: {
    uploadFileClickHandle(e) {},
  },
  mounted() {
    let that = this;
    this.isIPhoneX = /iphoneX/.test(this.$iphoneBool()) ? true : false;
    window.addEventListener("resize", () => {
      that.isIPhoneX = /iphoneX/.test(that.$iphoneBool()) ? true : false;
    });
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.footerNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46 / @base;
  background-color: #fff;
  z-index: 2000;
  display: flex;
  &.on {
    padding: 0 0 34 / @base 0;
  }
  a {
    width: 20%;
    line-height: 46 / @base;
    border-top: 1 / @base solid #ccc;
    font-size: 24 / @base;
    position: relative;
    &.on {
      color: brown;
    }
    &.footerNav_upload {
      font-size: 35 / @base;
    }
    span {
      &.footernav_tip {
        width: 20 / @base;
        height: 20 / @base;
        background-color: brown;
        color: #fff;
        border-radius: 20 / @base;
        position: absolute;
        top: -5 / @base;
        right: 10 / @base;
        font-size: 12 / @base;
        overflow: hidden;
        display: block;
        line-height: 20 / @base;
      }
    }
  }
}
</style>
